<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="content"></div>

    <script>
      const html = String.raw;
      // 数据渲染到HTML
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:8081/tours ");
      xhr.onload = function () {
        const content = document.getElementById("content");
        const data = JSON.parse(xhr.response);
        // console.log(data);
        // 将对象转换为html table
        content.innerHTML = html`
          <table border="1">
            <thead>
              <tr>
                <th>标题</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              ${data
                .map(
                  (el) => html`
                    <tr>
                      <td>${el.title}</td>
                      <td>${el.desc}</td>
                    </tr>
                  `
                )
                .join("")}
            </tbody>
          </table>
        `;
      };
      xhr.send();
    </script>
  </body>
</html>
